<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div{
	width: 100px;height: 100px;background: red;
}

    </style>
</head>
<body>
<div id='div'></div>
<script type="text/javascript">
	
	function getStyle(obj,name){
		if(obj.currentStyle){
			return obj.currentStyle[name]
		}else{
			return getComputedStyle(obj,false)[name]
		}
	};

	move(div,'width',300,10,function(){
		move(div,'height',900,70);
	});
	function move(obj,iStyle,iTarget,timer,fn){
		clearInterval(obj.timer);
		obj.timer = setInterval(function(){
			var w = parseFloat(getStyle(obj,iStyle));
			//100

			//110
			var m = iTarget;

			if(w == m){
				clearInterval(obj.timer);
				fn && fn();
				return;
			}
			var speed = (m-w)/7;
			speed = speed>0?Math.ceil(speed):Math.floor(speed);

			//console.log(speed + ',' +w)
			//(200 - 100)/10
			//200 - 110 /9

			obj.style[iStyle] = w+speed+'px';


			//110
			//119


		},timer);

	}
	
	
	
	
	//window.onclick = move;
</script>
</body>
</html>